<template>
  <div id="searchList">
    <!-- loading -->
    <div class="loading" v-show="loading_show">
      <img src="../../assets/image/loading1.gif" alt="">
    </div>
    <!-- 文章列表模块 -->
    <div class="list-title">
      <p>共{{total}}篇</p><br>
      <el-select v-model="sort_value" placeholder="请选择" class="ui-select" @click="sort_changed">
        <el-option
          id="select_btn"
          v-for="item in sort_option" 
          :key="item.value"
          :label="item.label" 
          :value="item.value" class="ui-option" >
        </el-option>
      </el-select>
      <!-- <span>共<input type="text" class="total" v-model="total" readonly>篇</span> -->
      
    </div>
    <div class="articleList"  v-show="article_show">
      <!-- 文章列表 -->
      <div class="article" v-for="article in articleList" v-if="article">
        <router-link :to="{
        path: '/articleDetail',
        name:'articleDetail',
        query: {
          filename: article.filename,
          dbcode: article.dbcode,
          publishTime: article.publishTime
        }
        }">
        <div class="article-title"><span class="title-icon"></span><span v-html="article.title"></span></div>
        <div class="article-author"><span>{{article.author}}</span><span>{{article.publishTime}}</span></div>
        <div class="article-detail" v-html="article.abstract_"></div>
        </router-link>
        <div class="article-link"><span class="link-know"><a v-bind:href="article.mirrorUrl" target="_blank">知网原文地址</a></span></div>
      </div>
      <!-- 加载更多 -->
      <div class="page">
        <el-button type="primary" @click="load_more" id="load_more">加载更多</el-button>
      </div>
    </div>
    <!-- 文章为空 -->
    <!-- <div v-else></div> -->
    <div class="article-empty" v-show="empty_show">
        <img src="../../assets/image/empty.png" alt="" width="300px">
    </div>
  </div>
</template>

<script>
// var articleList = [];

export default {
  name: "searchList",
  data() {
    return {
      testList: [1, 2, 3, 4, 5, 6, 7],
      loading_show: true,
      article_show: false,
      empty_show: false,
      articleList: [],
      total: 0,
      sort_value: this.Global.sort_value ? this.Global.sort_value : "1",
      sort_option: [
        {
          value: "1",
          label: "综合排序"
        },
        {
          value: "2",
          label: "时间排序"
        }
      ],
      start: "0",
      load_more_flag:false,
    };
  },
  watch: {
    $route: "reGetData",
    sort_value: "sort_changed",
    
  },
  methods: {
    getData: function() {
      // this.total = "0";
      var self = this;
      var url = this.$route.params.url?this.$route.params.url:`${ self.$store.state.domain }/article/list`;
      if (!this.load_more_flag) {
        this.start = 0 ;
      }
      $.ajax({
        type: "get",
        data: {
          keyword: this.$route.query.keyword?this.$route.query.keyword:this.$route.params.keyword,
          db: this.$route.query.classify?this.$route.query.classify:this.$route.params.classify,
          sort_type: this.$route.query.sort_value?this.$route.query.sort_value:this.$route.params.sort_value,
          start: this.start
        },
        // url: "http://seekerservice.usts.top/api/article/list",
        url: url,
        beforeSend: function (request) {  
           request.setRequestHeader("Authorization", self.$store.state.user.token);
        },
        success: function(data) {
          self.$route.params.url = ''
          self.start = data.data.start;
          if (!self.load_more_flag) {
            self.total = data.data.total;
          }
          self.load_more_flag = false;
          // self.total = data.data.total;
          self.articleList = self.articleList.concat(data.data.items);
          $("#load_more").html("加载更多");
            $(".loading").hide();
            if (self.articleList[0]) {
              $(".articleList").show();
            } else {
              $(".article-empty").show();
            }
        },
        error: function (data) {  
          if (data.responseJSON.message) {
            self.$notify({
              title: 'warning',
              message:data.responseJSON.message,
              type: 'warning'
            });
            self.$store.commit('logout')
          }
        }
      });
    },
    initStyle: function() {
      $("#searchInput").addClass("search-up");
      $(".logo").addClass("logo-up");
      $("body").addClass("change-bg");
      $("#footer").removeClass("home-footer");
      $('#genre_1').hide()
      $('#genre_2').show()
      // $(".genre p:first").addClass("active");
      setTimeout(() => {
        $(".mask").show();
      }, 500);
    },
    reGetData: function() {
      $(".article-empty").hide();
      $(".articleList").hide();
      $(".loading").show();
      this.articleList = [];
      window.scrollTo(0,0);
      this.getData();
    },
    sort_changed: function() {
      this.Global.sort_value = this.sort_value;
      this.$router.push({
        path: "/searchList",
        name: "searchList",
        query: {
          keyword: this.$route.query.keyword?this.$route.params.keyword:this.$route.params.keyword,
          classify: this.$route.query.classify?this.$route.params.classify:this.$route.params.classify,
          sort_value: this.sort_value
        },
        params: {
          keyword: this.$route.query.keyword?this.$route.params.keyword:this.$route.params.keyword,
          classify: this.$route.query.classify?this.$route.params.classify:this.$route.params.classify,
          sort_value: this.sort_value
        }
      });
    },
    load_more: function() {
      this.load_more_flag = true;
      $("#load_more").html('<i class="el-icon-loading"></i>');
      this.getData();
    }
  },
  mounted: function(params) {
    console.log(this.$route.query.keyword);
    
    // 获取数据延时，避免动画卡顿
    setTimeout(() => {
      this.getData();
    }, 500);
    // 初始化样式
    this.initStyle();
    // $('body').css("background","url(../../assets/image/bg1.jpg)");
  },
  destroyed: function () {  
    
  }
};
</script>

<style sccoped>
a {
  color: gray;
}
a:hover {
  color: #65b0ff;
}
.change-bg {
  background: white;
  overflow: auto;
}
.loading {
  position: relative;
  top: 200px;
  margin: 0 auto;
  display: block;
  transition: all 0.5s;
}
.footer-fixed {
  position: relative;
}
.articleList {
  width: 65%;
  min-width: 800px;
  margin: 0 auto;
  padding-top: 14em;
  text-align: start;
  overflow: hidden;
  display: none;
}
.article-empty {
  position: fixed;
  top: 45%;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
}
.article {
  padding: 15px 30px;
  border-bottom: 1px solid #ebe2e2;
}
.article .article-title {
  font-size: 18px;
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.article .title-icon {
  display: inline-block;
  height: 20px;
  width: 10px;
  background: #7b99da;
  margin-right: 10px;
}
.article .article-author {
  color: gray;
  padding-bottom: 10px;
}
.article .article-author span {
  margin-right: 20px;
}
.article .article-detail {
  letter-spacing: 1px;
  word-break: break-all;
  color: rgb(59, 59, 59);
  padding-bottom: 10px;
}
.article .article-link {
  color: gray;
  display: flex;
  justify-content: flex-end;
}
.article .article-link span {
  margin-right: 6%;
}
.page {
  margin: 8% auto;
  margin-top: 4%;
  text-align: center;
}
.page .block {
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}
.ui-select {
  width: 7em;
}
.ui-select input {
  border-radius: 50px;
  background: none;
  border: 1px solid gray;
  line-height: 20px;
  width: 103px;
  height: 30px;
}
#load_more {
  width: 150px;
  letter-spacing: 2px;
  background: #7b99da;
  border: none;
  transition: all 0.3s;
}
#load_more:hover {
  background: #e86f6e;
}
.list-title {
  position: fixed;
  color: gray;
  top: 250px;
  left: 38px;
  z-index: 999;
}
.list-title :nth-child(2) {
  margin-left: 20px;
}
.list-title .total {
  cursor: unset;
  border: none;
  outline: none;
  background: none;
  width: 20px;
}

/*媒体查询适配移动端*/
@media screen and (max-width: 700px) {
    .list-title {
      display: none;
    }
    .articleList {
      width: 95%;
      min-width: 0;
      padding-top: 26vh;
    }
    .article {
      padding: 5px;
    }
    .title-icon {
      display: none !important;
    }
    .article-title {
      color: #262525;
      font-size: 14px !important;
    }
    .article-detail {
      display: none;
    }
    .article-author {
      display: inline;
    }
    .article-link {
      display: none !important;
    }
    .loading img{
      width: 100%;
      margin-top: 60px;
    }
}
</style>
